<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>画中画 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>画中画</h1>
  <time datetime=2020-05-02T10:11:35Z class="post-date">Sat, May 2, 2020</time>
  <h1 id="画中画">画中画</h1>
<hr>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        <span style="color:#a6e22e">视频</span><span style="color:#960050;background-color:#1e0010">：</span>&lt;<span style="color:#f92672">video</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;video&#39;</span> <span style="color:#f92672">:src</span><span style="color:#e6db74">=&#34;img_url&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;350&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;240&#34;</span>&gt;&lt;/<span style="color:#f92672">video</span>&gt;
        &lt;<span style="color:#f92672">Button</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;into&#34;</span>&gt;{{ <span style="color:#a6e22e">this.hzh</span>}}&lt;/<span style="color:#f92672">Button</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span> () {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#75715e">//画中画
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">hzh</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;进入画中画&#39;</span>,
        }
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#75715e">//画中画
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">into</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">video</span> <span style="color:#f92672">!=</span> document.<span style="color:#a6e22e">pictureInPictureElement</span>){
                <span style="color:#75715e">//尝试进入画中画
</span><span style="color:#75715e"></span>                <span style="color:#a6e22e">video</span>.<span style="color:#a6e22e">requestPictureInPicture</span>();
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">hzh</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;退出画中画&#39;</span>
            }<span style="color:#66d9ef">else</span>{
                <span style="color:#75715e">//退出画中画
</span><span style="color:#75715e"></span>                document.<span style="color:#a6e22e">exitPictureInPicture</span>();
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">hzh</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;进入画中画&#39;</span>
            }
        },
    }<span style="color:#960050;background-color:#1e0010">，</span>
}
&lt;/<span style="color:#f92672">script</span>&gt;



</code></pre></div>
</div>


    </main>

    
  </body>
</html>
